<template>
    <div class="confirm-container">
        <div class="confirm-modal">
            <p class="title" v-if="!!title">
                {{title}}
            </p>
            <p class="content-text" v-if="!!text">{{text}}</p>
            <div class="buttons">
                <button class="button" v-for="button in buttons" :style="getButtonStyle(button)"
                        @click="onClick(button)">
                    {{button.text}}
                </button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {
        Prop,
        Component
    } from 'vue-property-decorator';

    import {
        Button
    } from './index';

    interface ButtonStyle {
        color?: string,
        backgroundColor?: string
    }

    @Component({
        name: `Confirm`
    })
    export default class Confirm extends Vue {
        @Prop({default: {}}) dialog!: any;
        @Prop({default: ``}) title!: string;
        @Prop({default: ``}) text!: string;
        @Prop({default: []}) buttons!: Array<Button>;

        onClick(button: Button) {
            const {
                onClick = () => {}
            } = (button || {}) as Button;

            const isClose = onClick() !== false;

            if (isClose) {
                this.dialog.close().then(
                    this.dialog.destroy
                )
            }
        }

        getButtonStyle(button: Button): ButtonStyle {
            const {
                color,
                backgroundColor
            } = (button || {}) as Button;

            return {
                color,
                backgroundColor
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "./../../common/var";
    .confirm-container {
        width: 100vw;
        max-width: 640px;
    }

    .confirm-modal {
        width: 75%;
        margin: auto;
        overflow: hidden;
        border-radius: 6px;
        background-color: #fff;
        padding: 24px 16px 0 16px;
        border-top: 4px solid $color;

        .title {
            color: #333;
            font-size: 16px;
            text-align: center;
            padding-bottom: 20px;
            font-weight: 600;
        }

        .button {
            height: 48px;
            display: block;
            flex: 1;
            font-size: 16px;
            color: #444;
            background-color: #fff;
            border-right: 1px solid #ececec;
            &:active {
                background-color: #f2f2f2;
            }
        }

        .buttons {
            display: flex;
            margin: 0 -16px;
            border-top: 1px solid #ececec;
            .button:last-child {
                border-right: none;
            }
        }

        .content-text {
            font-size: 16px;
            color: #666;
            text-align: center;
            padding-bottom: 20px;
            line-height: 21px;
        }
    }
</style>